<template>
	<section  class="flow-detail-container" >
		<template v-if="!(modelFlowInst && modelFlowInst.flowInstanceId)">
<!--		<template v-if="!(flowInst && flowInst.id)">-->
			<div class="flow-empty-detail-box">
				<a-empty></a-empty>
			</div>
		</template>
		<template v-else>
			<div class="flow-status-stamp"><FlowStatusStamp :status="flowInst.status" :size="80" /></div>
<!--			<div class="flow-header-box">-->
<!--				<div class="flow-no">编号：{{ flowInst.id }}</div>-->
<!--				<div class="action-area">-->
<!--					<div class="action-item" @click="onPrintClicked()"><icon-printer :size="16" /></div>-->
<!--					<FlowPrint-->
<!--						v-model:visible="showPrintModal"-->
<!--						:flow-inst="flowInst"-->
<!--						:form-value="formValue"-->
<!--						:flow-nodes="flowNodes"-->
<!--						:form-widgets="formWidgets" />-->
<!--				</div>-->
<!--			</div>-->
			<div class="flow-detail-box">
<!--				<div class="header-box">-->
<!--					<div class="summary-info">-->
<!--						<div class="title">{{ flowInst.name }}</div>-->
<!--						<div class="status">-->
<!--							<a-tag color="blue" v-if="flowInst.status == STATUS.UNDERWAY">{{ STATUS_LIST[0].name }}</a-tag>-->
<!--							<a-tag color="green" v-else-if="flowInst.status == STATUS.APPROVED">{{ STATUS_LIST[1].name }}</a-tag>-->
<!--							<a-tag color="red" v-else-if="flowInst.status == STATUS.REJECTED">{{ STATUS_LIST[2].name }}</a-tag>-->
<!--							<a-tag color="orangered" v-else-if="flowInst.status == STATUS.CANCELLED">{{ STATUS_LIST[3].name }}</a-tag>-->
<!--						</div>-->
<!--					</div>-->
<!--					<div class="initiator-info">-->
<!--						<flow-node-avatar :size="24" :id="flowInst.initiatorId" />-->
<!--						<div class="begin-time">{{ flowInst.beginTime }} 提交</div>-->
<!--					</div>-->
<!--				</div>-->

<!--				<a-divider orientation="left"></a-divider>-->

				<!-- 流程时间线 -->
				<div class="flow-box">
					<a-timeline mode="left" labelPosition="relative">
						<template v-for="node in flowNodes">
							<a-timeline-item :label="node.auditTime">
								<template #dot>
									<!-- <IconCheck class="node-dot" :style="{ backgroundColor: '#e8f3ff' }" /> -->
									<div class="assignee-container">
										<template v-if="node.underway">
											<template v-if="node.type == NODE.APPROVE">
												<a-avatar :size="36" style="background: #1989fa"><icon-stamp :size="24" /></a-avatar>
											</template>
											<template v-else-if="node.type == NODE.TRANSACT">
												<a-avatar :size="36" style="background: #926bd5"><icon-pen-fill :size="24" /></a-avatar>
											</template>
											<template v-else-if="node.type == NODE.TRIGGER">
												<a-avatar :size="36" style="background: #926bd5"><icon-pen-fill :size="24" /></a-avatar>
											</template>
											<template v-else-if="node.type == NODE.DELAY">
												<a-avatar :size="36" style="background: #926bd5"><icon-pen-fill :size="24" /></a-avatar>
											</template>
											<template v-else>
												<flow-node-avatar :size="36" :id="node.auditor" :show-name="false" />
											</template>
											<div class="badge"><img style="color: #2a5eff" :src="require('@/assets/flowable/svg/underway.svg')" /></div>
										</template>
										<template v-else-if="[CMD.COPY].includes(node.flowCmd)">
											<a-avatar :size="36" style="background: #1989fa"><img style="color: #fff" :src="require('@/assets/flowable/svg/copy.svg')" /></a-avatar>
											<div class="badge"><img :src="require('@/assets/flowable/svg/approval.svg')" /></div>
										</template>
										<template v-else-if="[CMD.APPROVED].includes(node.flowCmd)">
											<flow-node-avatar :size="36" :id="node.auditor" :show-name="false" />
											<div class="badge"><img :src="require('@/assets/flowable/svg/approval.svg')" /></div>
										</template>
										<template v-else-if="[CMD.REJECTED].includes(node.flowCmd)">
											<flow-node-avatar :size="36" :id="node.auditor" :show-name="false" />
											<div class="badge"><img :src="require('@/assets/flowable/svg/reject.svg')" /></div>
										</template>
										<template v-else-if="[CMD.AUTO_APPROVED].includes(node.flowCmd)">
											<a-avatar :size="36" style="background: #1989fa"><icon-robot /></a-avatar>
											<div class="badge"><img :src="require('@/assets/flowable/svg/approval.svg')" /></div>
										</template>
										<template v-else-if="[CMD.AUTO_REJECTED].includes(node.flowCmd)">
											<a-avatar :size="36" style="background: #1989fa"><icon-robot /></a-avatar>
											<div class="badge"><img :src="require('@/assets/flowable/svg/reject.svg')" /></div>
										</template>
										<template v-else>
											<flow-node-avatar :size="36" :id="node.auditor" :show-name="false" />
											<div class="badge"><img :src="require('@/assets/flowable/svg/approval.svg')" /></div>
										</template>
									</div>
								</template>
								<div class="audit-record">
									<div class="avatar sgement">
										<div class="node-name">
											<template v-if="node.nodeName">{{node.nodeName=="发起"?"申请":node.nodeName}}--</template>
											<template v-if="!node.nodeName && CMD.START == node.flowCmd">申请--</template>
											<template v-if="node.flowCmd == CMD.START">提交</template>
											<template v-else-if="[CMD.APPROVED, CMD.REJECTED, CMD.AUTO_APPROVED, CMD.AUTO_REJECTED].includes(node.flowCmd)">
												审批
											</template>
											<template v-else-if="node.flowCmd == CMD.CANCELED">作废</template>
											<template v-else-if="node.flowCmd == CMD.ASSIGN">转交</template>
											<template v-else-if="node.flowCmd == CMD.BACK">驳回</template>
											<template v-else-if="node.flowCmd == CMD.ADD_BEFORE_SIGN">前加签</template>
											<template v-else-if="node.flowCmd == CMD.ADD_AFTER_SIGN">后加签</template>
											<template v-else-if="node.flowCmd == CMD.ADD_SIGN">并加签</template>
											<template v-else-if="node.flowCmd == CMD.DEL_SIGN">减签</template>
											<template v-else-if="node.flowCmd == CMD.COPY">抄送</template>
											<template v-else-if="node.flowCmd == CMD.COMMENT">评论</template>
											<template v-else-if="node.flowCmd == CMD.TRANSACT">办理</template>
											<template v-else-if="node.flowCmd == CMD.TRIGGER">外部接口</template>
											<template v-else-if="node.flowCmd == CMD.DELAY">延迟处理</template>
											<template v-else-if="node.underway">
												<div class="error-approval" v-if="flowInst.errorReson">
													{{flowInst.errorReson}}
												</div>
												<div class="in-approval">
													<template v-if="node.type == NODE.APPROVE">审批中...</template>
													<template v-else-if="node.type == NODE.TRANSACT">办理中...</template>
													<template v-else>处理中...</template>
												</div>
											</template>
										</div>
										<!-- 审批人姓名 -->
										<div class="auditor-name">
											<template v-if="node.underway">
												<div class="node-sign-type">
													<template v-if="node.multiInstanceApprovalType == 2">
														<template v-if="node.type == NODE.APPROVE">只需一人审批同意</template>
														<template v-if="node.type == NODE.TRANSACT">只需一人办理同意</template>
													</template>
													<template v-else-if=" (node.userIds && node.userIds.length > 1) || (node.roleIds && node.roleIds.length > 1)">
														<template v-if="node.type == NODE.APPROVE">需所有人审批同意</template>
														<template v-if="node.type == NODE.TRANSACT">需所有人办理同意</template>
													</template>
												</div>
												<div class="node-assignee">
													<flow-node-avatar v-for="userId in node.userIds" :size="20" :id="userId" class="assignee-item" />
													<flow-node-role-avatar v-for="roleId in node.roleIds" :size="20" :id="roleId" class="assignee-item" />
												</div>
											</template>
											<template v-else>
												<template v-if="node.flowCmd == CMD.COPY">
													<!-- <div class="node-sign-assignee">抄送{{ node.userIds.length }}人</div> -->
													<div v-if="node.flowCmd == CMD.COPY" class="node-assignee">
														<flow-node-avatar v-for="userId in node.userIds" :size="20" :id="userId" class="assignee-item" />
													</div>
												</template>
												<template v-else>
													<div class="assignee-name">{{ ArrayUtil.get(users, "id", node.auditor).name }}</div>
													<div class="node-sign-assignee">
														<template v-if="[CMD.ADD_BEFORE_SIGN, CMD.ADD_AFTER_SIGN, CMD.ADD_SIGN].includes(node.flowCmd)">
															加签
															<div class="node-sign-assignee-name">{{ ArrayUtil.get(users, "id", node.assignee).name }}</div>
														</template>
														<template v-else-if="[CMD.DEL_SIGN].includes(node.flowCmd)">
															减签
															<div class="node-sign-assignee-name">{{ ArrayUtil.get(users, "id", node.assignee).name }}</div>
														</template>
														<template v-else-if="[CMD.ASSIGN].includes(node.flowCmd)">
															转交给
															<div class="node-sign-assignee-name">{{ ArrayUtil.get(users, "id", node.assignee).name }}</div>
														</template>
													</div>
												</template>
											</template>
										</div>
										<div class="comment" v-if="node.comment">
											<!-- <div class="commnet-title">审批意见</div> -->
											<div class="comment-content">
												{{ node.comment }}
											</div>
											<div class="comment-attachment" v-if="node.files">
												<div class="comment-attachment-item" v-for="attachment in node.files">
													<div class="name"><icon-drive-file :size="16" /> {{ attachment ? attachment.name : "" }}</div>
													<div class="download-icon">
														<div class="link" @click.prevent.stop="onAttachmentDownload(attachment, $event)">
															<icon-download :size="16" />
														</div>
													</div>
												</div>
											</div>
										</div>
									</div>
									<!-- 审批结果 -->
									<!-- <div class="cmd sgement">
									  <template v-if="node.underway"></template>
									  <template v-else-if="node.flowCmd == CMD.START"></template>
									  <template v-else-if="node.flowCmd == CMD.APPROVED"> <a-tag color="green">通过</a-tag> </template>
									  <template v-else-if="node.flowCmd == CMD.REJECTED"> <a-tag color="red">拒绝</a-tag> </template>
									  <template v-else-if="node.flowCmd == CMD.CANCELED"> <a-tag color="orangered">作废</a-tag> </template>
									  <template v-else-if="node.flowCmd == CMD.COPY"> <a-tag color="blue">抄送</a-tag> </template>
									  <template v-else><a-tag>完成</a-tag></template>
									</div> -->
								</div>
							</a-timeline-item>
						</template>
					</a-timeline>
				</div>
			</div>
			<!-- 底部操作栏 -->
			<div class="flow-actions">
				<template v-if="commentable">
					<a-button :loading="loading" @click="onComment()">
						<template #icon><icon-message /></template> 评论
					</a-button>
				</template>
				<template v-if="!finished && actionable">
					<template v-if="flowInst.nodeType == NODE.APPROVE">
						<a-button :loading="loading" type="primary" @click="onApproved()">
							<template #icon><icon-check /></template> 同意
						</a-button>
						<template v-if="flowInst.backable && !flowInst.notCannelAndJump">
							<a-button @click="onJumped()" :loading="loading" type="primary" status="danger">
								<template #icon><icon-backward /></template> 驳回
							</a-button>
						</template>
<!--						<a-button :loading="loading" type="primary" status="danger" @click="onRejected()">-->
<!--							<template #icon><icon-close /></template> 拒绝-->
<!--						</a-button>-->
					</template>
					<template v-else-if="flowInst.nodeType == NODE.TRANSACT">
						<a-button :loading="loading" type="primary" @click="onTransacted()">
							<template #icon><icon-check /></template> 提交
						</a-button>
					</template>
				</template>
				<template v-if="flowInst.reStartable == 1">
					<a-button :loading="loading" type="primary" @click="onRestart()">
						<template #icon><icon-check /></template> 重新发起
					</a-button>
				</template>
				<template v-if="flowInst.needActiveProcess && loginUser.id == flowInst.initiatorId">
					<a-button :loading="loading" type="primary" @click="onReactive()">
						<template #icon><icon-check /></template> 提交
					</a-button>
				</template>
				<template v-if="!finished && flowInst.cancelable && cancelable && !flowInst.notCannelAndJump">
					<a-button :loading="loading" @click="onCanceled()">
						<template #icon><icon-undo /></template> 作废
					</a-button>
				</template>

				<a-dropdown
					:popup-max-height="false"
					v-if="
						!finished &&
						actionable &&
						(flowInst.assignable || flowInst.backable || (flowInst.signable && [NODE_SIGN.NONE].includes(flowInst.nodeSignType)))
					  " class="flow-actions-box">
					<a-button>
						<template #icon><icon-down /></template> 更多
					</a-button>
					<template #content>
						<a-doption @click="onAssigned()" v-if="flowInst.assignable">
							<template #icon><icon-swap /></template>
							<template #default><div class="action-name">转交</div></template>
						</a-doption>
<!--						<a-doption @click="onJumped()" v-if="flowInst.backable && !flowInst.notCannelAndJump">-->
<!--							<template #icon><icon-backward /></template>-->
<!--							<template #default><div class="action-name">驳回</div></template>-->
<!--						</a-doption>-->
						<a-doption @click="onRejected()" v-if="!finished && actionable">
							<template #icon><icon-close /></template>
							<template #default><div class="action-name">拒绝</div></template>
						</a-doption>
						<a-doption @click="onAddSigned()" v-if="flowInst.signable && [NODE_SIGN.NONE].includes(flowInst.nodeSignType)">
							<template #icon><icon-user-add /></template>
							<template #default><div class="action-name">加签</div></template>
						</a-doption>
						<a-doption @click="onDelSigned()" v-if="flowInst.signable && [NODE_SIGN.NONE].includes(flowInst.nodeSignType)">
							<template #icon><img class="flow-desginIcon" :src="require('@/assets/flowable/svg/delete-user.svg')" /></template>
							<template #default><div class="action-name">减签</div></template>
						</a-doption>
					</template>
				</a-dropdown>
			</div>
		</template>
		<!-- 处理流程的弹窗 -->
		<a-modal :ok-loading="loading" :visible="showHandleModal" @ok="onHandleModelOK" @cancel="onHandleModelCancel" draggable>
			<template #title> {{ handleModalTitle }} </template>
			<div class="flow-exe-box">
				<a-form ref="_formRef" :model="handleModalForm" layout="vertical">
					<template v-if="handleModalForm.flowCmd == CMD.ASSIGN">
						<!-- <div class="action-tip">将当前审批转交给其他人审批，自己无需再审批。例如不方便处理当前审批时，可以转交给其他人。</div> -->
						<a-form-item field="assignee" label="转交给" :required="handleModalForm.flowCmd == CMD.ASSIGN"
									 :rules="[{ required: handleModalForm.flowCmd == CMD.ASSIGN, message: '转交人员必选' },]"
						>
							<a-select v-model:model-value="handleModalForm.assignee" allow-search placeholder="请选择转交人员">
								<a-option v-for="user in users.filter((i) => !assignUserIds.includes(i.id))" :value="user.id" :label="user.name" />
							</a-select>
						</a-form-item>
					</template>

					<template v-if="[CMD.ADD_BEFORE_SIGN, CMD.ADD_AFTER_SIGN, CMD.ADD_SIGN].includes(handleModalForm.flowCmd)">
						<a-form-item
							field="flowCmd"
							label="加签方式"
							:required="[CMD.ADD_BEFORE_SIGN, CMD.ADD_AFTER_SIGN, CMD.ADD_SIGN].includes(handleModalForm.flowCmd)">
							<a-radio-group v-model:model-value="handleModalForm.flowCmd" class="modify-sign-group">
								<a-radio :value="CMD.ADD_BEFORE_SIGN">
									前加签
									<a-tooltip content="在当前节点之前增加一个审批节点，当新增的节点同意后，再流转至当前节点。" mini>
										<icon-question-circle class="modify-sign-tip" />
									</a-tooltip>
								</a-radio>
								<a-radio :value="CMD.ADD_SIGN">
									并加签
									<a-tooltip content="在当前节点同步增加其他审批人。" mini>
										<icon-question-circle class="modify-sign-tip" />
									</a-tooltip>
								</a-radio>
								<a-radio :value="CMD.ADD_AFTER_SIGN">
									后加签
									<a-tooltip content="在当前节点之后增加一个审批节点，当前节点会默认同意，并流转至新增的节点。" mini>
										<icon-question-circle class="modify-sign-tip" />
									</a-tooltip>
								</a-radio>
							</a-radio-group>
						</a-form-item>

						<a-form-item
							field="userId"
							label="给谁加签"
							:required="[CMD.ADD_BEFORE_SIGN, CMD.ADD_AFTER_SIGN, CMD.ADD_SIGN].includes(handleModalForm.flowCmd)"
							:rules="[{ required: [CMD.ADD_BEFORE_SIGN, CMD.ADD_AFTER_SIGN, CMD.ADD_SIGN].includes(handleModalForm.flowCmd), message: '加签人员必选' },]"
							>
							<a-select v-model:model-value="handleModalForm.userId" allow-search placeholder="请选择加签人员">
								<a-option v-for="user in users" :value="user.id" :label="user.name" />
							</a-select>
						</a-form-item>
					</template>

					<a-form-item
						field="userId"
						label="给谁减签"
						:required="handleModalForm.flowCmd == CMD.DEL_SIGN"
						:rules="[{ required: handleModalForm.flowCmd == CMD.DEL_SIGN, message: '减签人员必选' },]"
						v-if="handleModalForm.flowCmd == CMD.DEL_SIGN">
						<a-select v-model:model-value="handleModalForm.userId" allow-search placeholder="请选择减签人员">
							<a-option v-for="user in users.filter((i) => deleteableUserIds.includes(i.id))" :value="user.id" :label="user.name" />
						</a-select>
					</a-form-item>

					<template v-if="handleModalForm.flowCmd == CMD.BACK">
						<!-- <div class="action-tip">将流程驳回到之前某一节点重新审批。例如发现之前审批有误时，可以将流程驳回到该节点。</div> -->
						<a-form-item field="flowNodeId" label="驳回到" :required="handleModalForm.flowCmd == CMD.BACK"
									 :rules="[{ required: handleModalForm.flowCmd == CMD.BACK, message: '驳回节点必选' },]">
							<a-select v-model:model-value="handleModalForm.flowNodeId" allow-search placeholder="请选择驳回节点">
								<a-option v-for="node in jumpableNodes" :value="node.id+':'+node.nodeId" :label="node.name" />
							</a-select>
						</a-form-item>
					</template>

					<a-form-item
						field="comment"
						:label="handleModelCommentLabel(handleModalForm.flowCmd)"
						:required="true"
						:rules="[{ required: true, message: '评论内容必填' },]">
						<a-textarea
							v-model:model-value="handleModalForm.comment"
							:placeholder="`请输入${handleModelCommentLabel(handleModalForm.flowCmd)}`"
							allow-clear
							:max-length="100"
							show-word-limit />
					</a-form-item>

					<a-form-item field="fileIds" label="附件" :required="handleModalForm.flowCmd == CMD.APPROVED && buttonPermission && buttonPermission.uploadAttachments === true"
								 :rules="[{ required: handleModalForm.flowCmd == CMD.APPROVED && buttonPermission && buttonPermission.uploadAttachments === true, message: '附件必须上传' },]">
						<a-upload
							v-model:file-list="handleModalForm.fileIds"
							:action="fileUploadUrl"
							:headers="fileUploadHeaders"
							multiple
							:limit="3"
							class="action-attachment">
							<template #upload-button>
								<a-button>
									<template #icon><icon-attachment /></template>上传
								</a-button>
							</template>
						</a-upload>
					</a-form-item>
				</a-form>
			</div>
		</a-modal>
	</section>
</template>

<script setup>
import { computed, onMounted, ref, watch } from "vue";
import { useOrganStore } from "@/store/flowable";
import ObjectUtil from "@/components/flowable/flow/common/ObjectUtil";
import ArrayUtil from "@/components/flowable/flow/common/ArrayUtil";
import { CMD, STATUS, STATUS_LIST, WIDGET, NODE_SIGN, NODE } from "@/components/flowable/flow/common/FlowConstant";
import FlowApi from "@/api/flowable/FlowApi";
import OrganApi from "@/api/flowable/OrganApi";
import FlowNodeAvatar from "@/components/flowable/common/FlowNodeAvatar.vue";
import FlowNodeRoleAvatar from "@/components/flowable/common/FlowNodeRoleAvatar.vue";
import FlowStatusStamp from "@/views/flowable/my-flow/flow-status-stamp.vue";
import FlowPrint from "@/views/flowable/my-flow/flow-print.vue";

import {
	IconStamp,
	IconRobot,
	IconPrinter,
	IconDriveFile,
	IconDownload,
	IconPenFill,
	IconDown,
	IconCheck,
	IconSwap,
	IconClose,
	IconMessage,
	IconBackward,
	IconUndo,
	IconUserAdd,
	IconAttachment, IconQuestionCircle,
} from "@arco-design/web-vue/es/icon";
import {FILE_BASE_URL} from "@/api/flowable/FileApi";
import tool from "@/utils/tool";
import sysConfig from "@/config";
import useTabs from '@/utils/useTabs';
import {ElMessageBox} from "element-plus";
import cache from "@/utils/cache";
import globalparam from "@/constant/model/globalparam";

let organStore = useOrganStore();
let users = computed(() => organStore.users);
let loginUser = tool.current.user();
let loading = ref(false);
let props = defineProps({
	modelFlowInst:{ type: Object, default: () => {} },
});
let cancelable = false;//作废按钮
let commentable = true;//评论按钮
let actionable = false;// 其他操作按钮
let emits = defineEmits(["onRemove", "update:flowInst"]);
let fileUploadUrl = FILE_BASE_URL + "/upload"; //文件上传地址
let token = tool.cookie.get("TOKEN");
let cfg = {};
if (token) {
	cfg[sysConfig.TOKEN_NAME] = sysConfig.TOKEN_PREFIX + token
}
let fileUploadHeaders = ref(cfg); // 文件上传请求头
let minioServerUrl = ref('');
let formWidgets = ref([]);
let flowInst = ref({});
let flowNodes = ref([]);
let formValue = ref({});
let finished = false;
// 获取审批节点
const loadFlowDetail = () => {
	FlowApi.getDetail({ flowInstId: flowInst.value.id }).then((resp) => {
		if (resp.code == 2000) {
			flowNodes.value = resp.data || [];
		}
	});
};

// 附件下载
const onAttachmentDownload = (attachment, evt) => {
	evt.stopPropagation();
	window.open(minioServerUrl.value + attachment.fileUrl, "_blank");
};

// 打印相关
let showPrintModal = ref(false);
const onPrintClicked = () => {
	showPrintModal.value = true;
};

// 处理流程弹窗相关
let jumpableNodes = ref([]);
let deleteableUserIds = ref([]);
let assignUserIds = ref([]);
let showHandleModal = ref(false);
let handleModalTitle = ref("");
let handleModalForm = ref({});

const onHandleModelCancel = () => {
	//重置表单验证
	_formRef.value.resetFields();
	showHandleModal.value = false;
	handleModalTitle.value = "";
	handleModalForm.value = {
		oldFlowNodeId: null, //当前流程节点id
		flowInstId: null, // 流程实例id
		taskId: null, // 任务id
		flowCmd: null, // 任务指令
		assignee: null, //指派人
		comment: null, //备注
	};
};

// 处理流程弹窗表单评论label
const handleModelCommentLabel = (cmd) => {
	switch (cmd) {
		case CMD.APPROVED:
		case CMD.REJECTED:
		case CMD.ASSIGN:
		case CMD.ADD_BEFORE_SIGN:
		case CMD.START:
		case CMD.SUBMIT:
		case CMD.ADD_AFTER_SIGN:
		case CMD.ADD_SIGN:
		case CMD.DEL_SIGN:
			return "审批意见";
		case CMD.CANCELED:
			return "作废理由";
		case CMD.BACK:
			return "驳回原因";
		case CMD.COMMENT:
			return "评论";
		case CMD.TRANSACT:
			return "办理意见";
	}
};
const _formRef = ref(null);
const onHandleModelOK = () => {
		//表单验证
		_formRef.value.validate().then(async (reulst) => {
			if (!reulst) {
				loading.value = true;
				//取出上传的文件id
				let handleModalFormValue = ObjectUtil.copy(handleModalForm.value);
				let {flowCmd: cmd, fileIds} = handleModalFormValue;
				if (fileIds && fileIds.length > 0){
					handleModalFormValue.fileIds = fileIds.map((v) => (v.response || {}).data.id);
				}
				let req = null;
				switch (cmd) {
					case CMD.CANCELED:
						req = await FlowApi.cancel(handleModalFormValue);
						break;
					case CMD.COMMENT:
						req = await FlowApi.comment(handleModalFormValue);
						break;
					case CMD.BACK:
						req = await FlowApi.jump(handleModalFormValue);
						break;
					case CMD.ADD_BEFORE_SIGN:
						req = await FlowApi.addBeforeSign(handleModalFormValue);
						break;
					case CMD.ADD_AFTER_SIGN:
						req = await FlowApi.addAfterSign(handleModalFormValue);
						break;
					case CMD.ADD_SIGN:
						req = await FlowApi.addSign(handleModalFormValue);
						break;
					case CMD.DEL_SIGN:
						req = await FlowApi.delSign(handleModalFormValue);
						break;
					case CMD.APPROVED:
						req = await FlowApi.approve(handleModalFormValue);
						break;
					case CMD.REJECTED:
						req = await FlowApi.reject(handleModalFormValue);
						break;
					case CMD.ASSIGN:
						req = await FlowApi.assign(handleModalFormValue);
						break;
					case CMD.TRANSACT:
						req = await FlowApi.transact(handleModalFormValue);
						break;
					case CMD.START:
						req = await FlowApi.restart(handleModalFormValue);
						break;
				}
				if (req.code == 2000) {
					onHandleModelCancel();
					useTabs.refresh();
				}
				loading.value = false;
			}
		});
};

const initModalForm = (cmd) => {
	let comment = '';
	if(cmd === CMD.APPROVED || cmd === CMD.START){
		props.modelFlowInst._canReject = false;
	}
	if(cmd === CMD.APPROVED){
		comment = '同意';
	}
	return {
		flowInstId: flowInst.value.id,
		oldFlowNodeId: flowInst.value.actNodeId,
		taskId: flowInst.value.taskId,
		comment: comment,
		flowCmd: cmd,
		fileIds: [],
	};
};
const onApproved = () => {
	loading.value = true;
	handleModalTitle.value = "同意审批";
	handleModalForm.value = initModalForm(CMD.APPROVED);
	loading.value = false;
};
const onRejected = () => {
	loading.value = true;
	handleModalTitle.value = "拒绝审批";
	handleModalForm.value = initModalForm(CMD.REJECTED);
	showHandleModal.value = true;
	loading.value = false;
};
const onTransacted = () => {
	loading.value = true;
	handleModalTitle.value = "审批办理";
	handleModalForm.value = initModalForm(CMD.TRANSACT);
	showHandleModal.value = true;
	loading.value = false;
};
const onCanceled = () => {
	loading.value = true;
	handleModalTitle.value = "作废审批";
	handleModalForm.value = initModalForm(CMD.CANCELED);
	showHandleModal.value = true;
	loading.value = false;
};
const onAssigned = () => {
	loading.value = true;
	FlowApi.listAssignAssignees({
		flowInstId: flowInst.value.id,
		actNodeId: flowInst.value.actNodeId,
	}).then((resp) => {
		if (resp.code == 2000) assignUserIds.value = resp.data || [];
	});
	handleModalTitle.value = "转交审批";
	handleModalForm.value = initModalForm(CMD.ASSIGN);
	showHandleModal.value = true;
	loading.value = false;
};
const onComment = () => {
	loading.value = true;
	handleModalTitle.value = "评论审批";
	handleModalForm.value = initModalForm(CMD.COMMENT);
	showHandleModal.value = true;
	loading.value = false;
};
const onJumped = () => {
	loading.value = true;
	FlowApi.listJumpableNodes({
		flowInstId: flowInst.value.id,
		actNodeId: flowInst.value.actNodeId,
	}).then((resp) => {
		if (resp.code == 2000) jumpableNodes.value = resp.data || [];
	});
	handleModalTitle.value = "驳回审批";
	handleModalForm.value = initModalForm(CMD.BACK);
	showHandleModal.value = true;
	loading.value = false;
};
const onRestart = () => {
	loading.value = true;
	handleModalTitle.value = "重新发起";
	handleModalForm.value = initModalForm(CMD.START);
	loading.value = false;
}
const onReactive = () => {
	ElMessageBox.confirm(`是否确认执行`, '警告', {
		type: 'warning'
	}).then(()=>{
		loading.value = true;
		let handleModal = {
			flowInstId: flowInst.value.id,
			oldFlowNodeId: flowInst.value.actNodeId,
			taskId: flowInst.value.taskId,
			flowCmd: CMD.SUBMIT,
		}
		FlowApi.reactivate(handleModal).then((resp) => {
			if (resp.code == 2000) {
				onHandleModelCancel();
				useTabs.refresh();
			}
			loading.value = false;
		});
	}).catch(()=>{});
}
const onAddSigned = () => {
	handleModalTitle.value = "审批加签";
	handleModalForm.value = initModalForm(CMD.ADD_SIGN);
	showHandleModal.value = true;
};
const onDelSigned = () => {
	FlowApi.listRemoveableNodeAssignees({
		flowInstId: flowInst.value.id,
		actNodeId: flowInst.value.actNodeId,
	}).then((resp) => {
		if (resp.code == 2000) deleteableUserIds.value = resp.data || [];
	});
	handleModalTitle.value = "审批减签";
	handleModalForm.value = initModalForm(CMD.DEL_SIGN);
	showHandleModal.value = true;
};
let buttonPermission = {};
const loadFlowInstance = (flowInstanceId) => {
	FlowApi.getFlowInsts({ flowInstId: flowInstanceId  }).then((resp) => {
		if (resp.code == 2000) {
			flowInst.value = resp.data || {};
			buttonPermission = JSON.parse(flowInst.value.buttonPermission);
			//console.log(buttonPermission)
			//判断作废按钮是否显示
			//判断当前登录人和流程申请人是否为同一个人
			if(flowInst.value.initiatorId == tool.current.user().id && flowInst.value.cancelable){
				cancelable = true;
			}
			if(flowInst.value.status != 0){
				finished = true;
			}
			//当前节点未结束则判断当前登录人是否需要显示流程操作按钮
			if(!finished && flowInst.value.taskId){
				actionable = true;
			}
			loadFlowDetail();
		}
	})
}
watch(
	() => props.modelFlowInst,
	(nv) => {
		if (nv && nv.flowInstanceId) {
			loadFlowInstance(nv.flowInstanceId);
		}
	},
	{ immediate: true }
);

watch(
    () => props.modelFlowInst._canReject,
    (nv) => {
       showHandleModal.value = nv===true;
    },
    { immediate: true }
);

onMounted(() => {
	cache.data.loadGlobalParam(globalparam.minioServerUrl.paramCode).then((reuslt) =>{
		minioServerUrl.value = reuslt;
	});
	OrganApi.loadOrgan(); // 加载组织
});
</script>

<style lang="less" scoped>
@import "@/style/flowable/variables.module.less";
@bottomActionHeight: 52px;
@SidePadding: 20px;
@HeaderHeight: 40px;
@FormLabelWidth: 84px;

.flow-detail-container {
	height: 100%;
	overflow: hidden;
	position: relative;
}

.flow-empty-detail-box {
	margin-top: 0px;
}

.flow-status-stamp {
	position: absolute;
	right: 30px;
	top: 30px;
}

.flow-header-box {
	font-weight: 400;
	font-size: 13px;
	border-bottom: 1px solid #e5e6ec;
	padding: 0 @SidePadding;
	height: calc(@HeaderHeight - 1px);
	display: flex;
	align-items: center;
	justify-content: space-between;
	color: #86909c;

	.action-area {
		.action-item {
			cursor: pointer;
			padding: 4px;
			border-radius: 4px;
			&:hover {
				background-color: #f2f3f5;
			}
		}
	}
}
.flow-desginIcon{
	display: inline-block;
	width: 1em;
	height: 1em;
	color: inherit;
	font-style: normal;
	vertical-align: -2px;
	outline: none;
	stroke: currentColor;
}
.flow-detail-box {
	height: calc(100% - @bottomActionHeight - @HeaderHeight);
	overflow: hidden;
	overflow-y: auto;
	padding: 0 calc(@SidePadding + 10px);

	.header-box {
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding-top: 20px;

		.summary-info {
			display: flex;
			align-items: center;

			.title {
				font-size: 24px;
				font-family: PingFangSC-Semibold, PingFang SC;
				color: #1d2129;
			}

			.status {
				margin-left: 20px;
			}
		}

		.initiator-info {
			display: flex;
			align-items: center;
			margin-top: 16px;

			.begin-time {
				margin-left: 20px;
				font-weight: 350;
				color: #86909c;
				font-size: 13px;
				user-select: none;
			}
		}
	}

	.flow-form-box {
		padding: 10px 0;

		.form-item {
			font-size: 14px;
			display: flex;

			+ .form-item {
				margin-top: 12px;
			}

			.label {
				color: #9ba5b3;
				width: @FormLabelWidth;
				white-space: nowrap;
				overflow: hidden;
				text-align: right;
				margin-right: 16px;
			}

			.value {
				color: #1d2129;
				display: flex;
				align-items: flex-start;
				// flex: 1;
				width: calc(100% - @FormLabelWidth - 16px);
				word-wrap: anywhere;
				word-break: break-all;
			}

			.detail-value {
				display: block;
			}

			.link {
				color: #1d2129;
				text-decoration: none;
				cursor: pointer;
				&:hover {
					color: #165cfd;
					text-decoration: underline;
				}
			}
		}

		.flow-inst-list {
			width: 100%;
			display: grid !important;
			grid-template-columns: repeat(auto-fit, @FlowCardWidth);
			gap: 6px;

			.flow-card-box {
				transition: box-shadow 0.2s cubic-bezier(0, 0, 1, 1);
				&:hover {
					box-shadow: 4px 4px 12px rgb(var(--gray-3));
				}
			}
		}

		.img-preview {
			display: flex;
			align-items: center;

			img {
				width: 40px;
				height: 40px;
				cursor: pointer;

				+ img {
					margin-left: 10px;
				}
			}
		}

		.attachment-box {
			width: 100%;

			.attachment-item {
				background-color: #f7f8fa;
				display: flex;
				align-items: center;
				cursor: pointer;
				padding: 8px 12px;
				border-radius: 4px;
				width: 100%;
				font-size: 13px;

				+ .attachment-item {
					margin-top: 4px;
				}
			}
		}

		.form-detail {
			margin-top: 8px;
			border: 1px dashed #e1e1e1;
			border-radius: var(--border-radius-small);

			.detail-title {
				color: var(--color-text-3);
				background-color: #f9fafa;
				padding: 2px;
			}

			.label {
				margin-top: 8px;
			}
		}
	}

	// 流程时间线相关样式
	.flow-box {
		user-select: none;

		// 流程头像
		.assignee-container {
			position: relative;

			.badge {
				@BadgeSize: 18px;
				@BadgeOffset: -4px;
				position: absolute;
				width: @BadgeSize;
				height: @BadgeSize;
				display: flex;
				align-items: center;
				justify-content: center;
				bottom: @BadgeOffset;
				right: @BadgeOffset;
				z-index: 999;
				border: 2px solid #fff;
				background-color: #fff;
				border-radius: 50%;
				overflow: hidden;
			}
		}

		.audit-record {
			text-align: left;
			display: flex;
			flex-direction: row;
			justify-content: space-between;

			.sgement {
				margin-left: 8px;
				flex: 1;
			}

			.node-name {
				font-weight: 400;
				color: #86909c;

				.in-approval {
					color: #2a5eff;
				}
				.error-approval {
					color: red;
				}
			}

			.auditor-name {
				font-size: 14px;

				.node-sign-type,
				.node-sign-assignee {
					font-weight: 400;
					color: #86909c;
					font-size: 12px;

					.node-sign-assignee-name {
						color: #2a5eff;
						display: inline-block;
					}
				}

				.node-assignee {
					margin-top: 4px;
					display: flex;
					flex-flow: row wrap;
					gap: 6px;
				}

				.assignee-name {
					color: #1d2129;
				}
			}

			.comment {
				user-select: none;
				margin: 4px 0 16px;
				padding: 8px 16px;
				border-radius: 4px;
				// background: #f2f4f5;
				background-color: #f8f8fa;

				.commnet-title {
					font-weight: 400;
					color: #a6aab1;
					font-size: 13px;
				}

				.comment-content {
					font-weight: 500;
					color: #1d2129;
				}

				.comment-attachment {
					gap: 10px;
					margin: 4px 0;
					display: flex;
					flex-wrap: wrap;

					.comment-attachment-item {
						border-radius: 4px;
						border: 1px solid #e1e1e1;
						padding: 4px 8px;
						display: flex;
						align-items: center;
						justify-content: space-between;
						gap: 10px;

						.name {
							display: flex;
							align-items: center;
							gap: 4px;
						}

						.download-icon {
							display: flex;
							align-items: center;
							cursor: pointer;
							color: #165cfd;

							&:hover {
								opacity: 0.7;
							}
						}
					}
				}
			}

			.cmd {
				text-align: right;
			}
		}
	}
}
.flow-actions{
	position: fixed;
  bottom: 20px;
  right: 80px;
  width: 450px;
  height: 50px;
  color: white;
  border: none;
  border-radius: 25px;
  cursor: pointer;
  z-index: 999;
}
</style>

<style lang="less">
.flow-detail-box {
	.arco-timeline-item {
		min-height: 108px;
	}

	.arco-timeline-item-dot-line {
		border-color: #98b7ff;
	}

	.arco-timeline-item-dot-content {
		width: 36px;
		height: 36px;
		line-height: 36px;
	}

	.arco-timeline-item-content-wrapper {
		margin-left: 36px;
	}

	.arco-table-cell {
		padding: 6px;
		font-size: 13px;
		min-height: 30px;
	}
}

.arco-image-preview {
	.arco-image-preview-arrow {
		position: initial;
	}
}

.arco-dropdown-open .arco-icon-down {
	transform: rotate(180deg);
}

.flow-actions-box {
	.arco-dropdown {
		padding: 4px;
	}
}

.flow-exe-box {
	.modify-sign-group {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		width: 100%;

		.modify-sign-tip {
			color: var(--color-text-4);
		}
	}

	.action-attachment {
		.arco-upload-list-item {
			margin-top: 0;

			&:first-of-type {
				margin-top: 12px;
			}

			.arco-upload-list-item-content {
				padding: 4px 10px 4px 12px;
			}

			.arco-upload-list-item-operation {
				.arco-icon {
					font-size: 16px;
				}
			}
		}

		.arco-upload-hide + .arco-upload-list .arco-upload-list-item:first-of-type {
			margin-top: 0px;
		}
	}
}

.flow-detail-box .flow-box .audit-record .comment{
	background-color: #fff !important;
	padding-left: 0px;
}

.flow-detail-box .flow-box .audit-record .comment .comment-content{
	font-weight: 500 !important;
}
</style>
